<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="/resource/css/main.css" />
    <style type="text/css">
        .trShop {
            display: none;
        }

        .txtDate {
            width: 110px;
        }

        td{
            border: solid grey 1px;
        }

        #divCoupon tr{
            height: 20px;
        }
    </style>
    <script type="text/javascript" src="/resource/script/jquery.js"></script>
    <script type="text/javascript" src="/resource/script/jquery.watermark.js"></script>
    <script type="text/javascript">
        String.format = function() {
            if (arguments.length == 0)
                return null;
            var str = arguments[0];
            for ( var i = 1; i < arguments.length; i++) {
                var re = new RegExp('\\%' + i, 'gm');
                str = str.replace(re, arguments[i]);
            }
            return str;
        };

        var isCommon = false;

        $(document).ready(function(){
            var txtEndDate = $("#txtEndDate");
            var txtAmount = $("#txtAmount");
            var rdoCommon1 = $("#rdoCommon1");
            var rdoCommon0 = $("#rdoCommon0");
            var selMaster = $("#selMaster");
            var selSalve = $("#selSalve");
            var txtCondition = $("#txtCondition");

            txtEndDate.watermark({
                watermarkText: "格式：20150907",
                className: "watermark"
            });

            txtCondition.watermark({
                watermarkText: "填0则无限制",
                className: "watermark"
            });

            rdoCommon1.click(function(){
                selMaster.val(0);
                selSalve.attr("disabled", "disabled");
                selSalve.html("<option value ='0'> -- 未选择 -- </option>");
                $(".trShop").each(function(){
                    isCommon = true;
                    $(this).hide();
                });
            });

            rdoCommon0.click(function(){
                $(".trShop").each(function(){
                    isCommon = false;
                    $(this).show();
                });
            });

            selMaster.change(function () {
                if($(this).val() > 0){
                    $.post("/shop/name/list",
                        {
                            shopId:$(this).val()
                        },
                        function(data, status){
                            if(status == "success"){
                                if (data.result){
                                    selSalve.removeAttr("disabled");
                                    selSalve.html(data.nameList);
                                }
                                else {
                                    alert(data.errorMsg);
                                }
                            }
                            else {
                                alert("网络请求出错，请重新再试！");
                            }
                        }
                    );
                }
                else {
                    selSalve.attr("disabled", "disabled");
                    selSalve.html("<option value ='0'> -- 未选择 -- </option>");
                }
            });

            $("#btnAdd").click(function(){
                $("#divCover").fadeIn();
                $("#divCoupon").fadeIn();
            });

            $("#btnSubmit").click(function(){
                $.post("/coupon/add",
                    {
                        endDate:txtEndDate.val(),
                        amount:txtAmount.val(),
                        common:isCommon,
                        slaveShop:selSalve.val(),
                        condition:txtCondition.val()
                    },
                    function(data, status){
                        if(status == "success"){
                            if (data.result){
                                $("#divCover").fadeOut();
                                $("#divCoupon").fadeOut();
                                var trHtmlTmp="<tr id='tr%1'><td>%2元</td><td>%3</td><td>%4</td><td>%5</td><td>%6</td><td>%7</td><td>%8</td><td><input type='button' value='删除' onclick=\"deleteCoupon('%9')\"></td></tr>";
                                var trHtml = String.format(trHtmlTmp, data.couponId, data.amount, data.beginTime, data.endTime, data.masterShopName, data.slaveShopName, data.condition, data.status, data.couponId);
                                $("#trTitle").after(trHtml);
                                clearCouponForm();
                            }
                            else {
                                alert(data.errorMsg);
                            }
                        }
                        else {
                            alert("网络请求出错，请重新再试！");
                        }
                    }
                );
            });

            $("#btnCancel").click(function(){
                $("#divCover").fadeOut();
                $("#divCoupon").fadeOut();

                clearCouponForm();
            });

            function clearCouponForm(){
                txtEndDate.val('');
                txtAmount.val('');
                rdoCommon1.click();
                selMaster.select(0);
                selSalve.select(0);
                txtCondition.val('');
            }
        });

        function deleteCoupon(cid) {
            $.post("/coupon/delete",
                {
                    couponId:cid
                },
                function(data, status){
                    if(status == "success"){
                        if (data.result){
                            alert("优惠券删除成功！");
                            var trId = "#tr" + cid;
                            $(trId).remove();
                        }
                        else {
                            alert(data.errorMsg);
                        }
                    }
                    else {
                        alert("网络请求出错，请重新再试！");
                    }
                }
            );
        }
    </script>
</head>
<body>
<input id="btnAdd" type="button" value="添加优惠劵" style="position: absolute; right: 5%; top: 10px;">
<table id="tBarberInfo" style=" border: solid grey 1px; margin-top: 30px;">
    <tr id="trTitle">
        <td width="100px">优惠金额</td>
        <td width="120px">起始时间</td>
        <td width="120px">过期时间</td>
        <td width="120px">适用品牌</td>
        <td width="120px">适用门店</td>
        <td width="100px">使用条件</td>
        <td width="80px">状态</td>
        <td width="80px">操作</td>
    </tr>
    <c:forEach items="${couponList}" var="coupon">
        <tr id="tr${coupon.couponId}">
            <td><c:out value="${coupon.amount}元" /></td>
            <td><c:out value="${coupon.beginTime}" /></td>
            <td><c:out value="${coupon.endTime}" /></td>
            <td><c:out value="${coupon.masterShopName}" /></td>
            <td><c:out value="${coupon.slaveShopName}" /></td>
            <td><c:out value="${coupon.condition}" /></td>
            <td><c:out value="${coupon.status}" /></td>
            <td><input type="button" value="删除" onclick="deleteCoupon('${coupon.couponId}')"></td>
        </tr>
    </c:forEach>
</table>

<div id="divCover" class="divMask" style="display: none"></div>
<div id="divCoupon" style="position: absolute; width: 480px; height: 520px; left: 50%; margin-left: -240px; top: 10px; background-color: #FFFFFF; z-index: 10; display: none;">
    <table style="width: 100%; margin-top: 20px; height: 420px;">
        <tr><td>有效期到： <input id="txtEndDate" class="txtDate" type="text"></td></tr>
        <tr><td>金额：<input id="txtAmount" type="text"> 元</td></tr>
        <tr>
            <td>
                是否所有品牌通用
                <input id="rdoCommon1" name="rdoCommon" type="radio" value="1" checked="checked"/>是
                <input id="rdoCommon0" name="rdoCommon" type="radio" value="0" />否
            </td>
        </tr>
        <tr class="trShop">
            <td>选择品牌：
                <select id="selMaster">
                    <option value ="0"> -- 未选择 -- </option>
                    <c:forEach items="${masterShopNameList}" var="nameItem">
                        <option value ='<c:out value="${nameItem.id}" />'><c:out value="${nameItem.name}" /></option>
                    </c:forEach>
                </select>
            </td>
        </tr>
        <tr class="trShop">
            <td>选择分店：
                <select id="selSalve" disabled="disabled">
                    <option value ="0"> -- 未选择 -- </option>
                </select>
            </td>
        </tr>
        <tr><td>使用条件： 满 <input id="txtCondition" type="text"> 元可用</td></tr>
    </table>

    <input id="btnSubmit" type="button" value="提交" style="position: absolute; bottom: 30px; width: 60px; left: 100px;">
    <input id="btnCancel" type="button" value="取消" style="position: absolute; bottom: 30px; width: 60px; right: 100px;">
</div>
</body>
</html>